<template>
  <div class="AddOrUpdate_main add_container add_container_table">
    <div class="main_main">
      <div class="form_padding">
        <el-form ref="form" :model="formData" :inline="true">
          <el-form-item label="盘点单号">
            <div class="show">{{ formData.code }}</div>
          </el-form-item>
          <el-form-item label="仓库">
            <div class="show">{{ formData.deviceSpareWarehouseName }}</div>
          </el-form-item>
          <el-form-item label="盘点人员">
            <div class="show">{{ formData.checkRealName }}</div>
          </el-form-item>
          <el-form-item label="盘点时间" class="time">
            <div class="show">{{ formData.checkTime }}</div>
          </el-form-item>
          <el-form-item label="备注" class="remark">
            <div class="show">{{ formData.remark }}</div>
          </el-form-item>
        </el-form>
      </div>
      <div ref="table_container2" class="table_container dictDetail addRow_table">
        <el-table
          ref="table"
          :data="stockList"
          :height="tableHeight"
          stripe
          border
        >
          <el-table-column
            prop="spareCode"
            label="备件编码"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.spareCode }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="spareName"
            label="备件名称"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.spareName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="spareModel"
            label="规格型号"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.spareModel }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="supplierName"
            label="备件供应商"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.supplierName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="numberUnitLabel"
            label="备件单位"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.numberUnitLabel }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="batch"
            label="批号"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.batch }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="number"
            label="库存数量"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.number }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="checkNumber"
            label="实盘数量"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.checkNumber }}</span>
            </template></el-table-column>
          <el-table-column
            prop="differenceNumber"
            label="差异数量"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.differenceNumber =scope.row.checkNumber - scope.row.number?scope.row.checkNumber - scope.row.number :0 }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { addOrUpdate, getInfo, getUserList, getAllBatchByWarehouseId, listIsNotEmpty } from '@/api/equipmentManage/sparePart/inventory'
import { list } from '@/api/equipmentManage/sparePart/warehouse'
import { mapGetters } from 'vuex'
import moment from 'moment'
export default {
  name: 'AddOrUpdate',
  props: {
    layerid: {},
    id: {},
    defaultValue: {},
    row: {}
  },
  data() {
    return {
      formData: {
        code: '',
        deviceSpareWarehouseId: '',
        checkBy: '',
        checkTime: '',
        remark: '',
        status: '0',
        deviceSpareWarehouseName: '',
        checkRealName: ''
      },
      pageData: {
        pageNum: 1,
        pageSize: 20,
        orderByColumn: 'updateTime',
        isAsc: 'desc'
      },
      typeList: [
        { value: 1, label: '采购入库' },
        { value: 2, label: '外协入库' },
        { value: 3, label: '成品入库' }
      ],
      selectData: [],
      tableData: [],
      tableHeight: '300',
      num: 1,
      roleOptions: [],
      objectData: [],
      userList: [],
      stockList: [],
      statusOptionsWarehouse: []
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  created() {
    if (!this.id) { // 没有id就是新增
      Object.keys(this.defaultValue).forEach(key => { // 给右边数据赋值
        this.formData[key] = this.defaultValue[key]
      })
    } else { // 有id就是编辑
      this.getInfo()
    }
  },
  mounted() {
    this.getList()
    this.laodUserList()
    this.loadWarehouseList()
    this.formData.checkBy = this.userId
    this.formData.checkTime = moment(new Date()).format('YYYY-MM-DD HH:mm')
  },
  methods: {
    // 查询所有仓库
    loadWarehouseList() {
      listIsNotEmpty().then(res => {
        console.log(res)
        res.data.forEach(item => {
          item['value'] = item.id
          item['label'] = item.name
        })
        this.statusOptionsWarehouse = res.data
      })
    },
    // 查询所有人员
    laodUserList() {
      getUserList({
        companyId: this.$store.state.companyId
      }).then(res => {
        console.log(res)
        this.userList = res.data
      })
    },
    // 切换仓库查询库存
    changeWarehouse(e) {
      this.loadgetBatchByBookIdAndWarehouseId(e)
    },
    // 查询仓库下的库存
    loadgetBatchByBookIdAndWarehouseId(id) {
      getAllBatchByWarehouseId({
        id: id
      }).then(res => {
        console.log(1111, res)
        this.stockList = res.data
      })
    },
    getList() {
      list(this.pageData).then(res => {
        this.selectData = res.data
      })
    },
    getInfo() {
      getInfo(this.id).then(res => {
        Object.keys(this.formData).forEach(key => { // 给右边数据赋值
          this.formData[key] = res.data[key]
          this.stockList = res.data.data
        })
      })
    },
    //  保存
    save() {
      this.formData.status = '0'
      this.onSubmit()
    },
    // 提交
    onSubmit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.formData.status = '1'
          addOrUpdate({
            ...this.formData,
            data: this.stockList
          }).then(res => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            this.$layer.close(this.layerid) // 关闭弹框
            this.$parent.refresh() // 调用父组件的刷新方法
          })
        }
      })
    },
    cancel() {
      this.$layer.close(this.layerid)// 关闭弹框
    },
    removeRow(index) {
      this.tableData.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
.spare-btn{
  margin: 15px 0;
}
.main_main{

  .remark{
    /deep/ .el-form-item__content{
      width: 680px !important;
    }
  }
}
</style>

